<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            outline: none;
        }
    </style>
</head>

<body>

    <form action="">
        <input type="text">
        <input class="inp2" type="text">
        <button type="submit">按钮</button>
    </form>

    <script>

        // 表单事件

        //    focus  焦点
        //    blur   失去焦点

        //    input  输入框事件

        //    change  失去焦点且发生改变


        // 表单方法
        //    focus()   让元素获取焦点
        //    blur()    让元素失去焦点

        var oInp = document.querySelector('input');
        var oInp2 = document.querySelector('.inp2');
        oInp.onfocus = function () {
            console.log(1);
        }

        // 失去焦点
        oInp.onblur = function () {
            console.log(2);
        }


        // 输入事件  --- 输入的内容改变就会触发事件
        oInp.oninput = function () {
            console.log(3);
            if (this.value.length == 3) {
                // oInp2.focus();
                this.blur()
            }
        }


        // 失去焦点且发生改变
        oInp.onchange = function () {
            console.log(4);
        }

    </script>

</body>

</html>